<template>
    <div class="record">

        <!--S列表-->
        <div id="list"  v-if="data.length > 0">
            <cube-scroll
                    ref="scroll"
                    :options="scroll_option"
                    @pulling-up="upLoad"
            >
                    <div class="list">
                        <dl v-for="item in data"
                            :key="item.id"
                            >
                            <dt><img v-lazy="item.member.avatar" /></dt>
                            <dd class="nickname">{{item.member.nickname}}</dd>
                            <dd class="time">{{item.create_time}}</dd>
                            <cube-button
                                    class="watch"
                                    :inline="true"
                                    @click="showWatch(item.form_content)"
                            >
                                查看信息
                            </cube-button>
                        </dl>
                    </div>
                <!--E列表-->
            </cube-scroll>
            <cube-button
                    class="send-email-btn"
                    @click="sendEmail"
                    :disabled="sending"
            >
                发送至邮箱
            </cube-button>
        </div>
        <empty v-else style="height: 100%;">暂无记录</empty>

        <!--S表单信息-->
        <watch
                :is_show="watch.is_show"
                :data="watch.data"
                @close="watch.is_show = false"
        >
        </watch>
        <!--E表单信息-->
    </div>
</template>

<script>
import Empty from "@c/empty"
import Watch from "./components/watch"
export default {
    name: "record",
    data() {
      return {
          // 红包id
          red_id: 0,
          // 数据请求状态，请求中不允许重复请求
          loading: false,
          // 邮件是否发送中
          sending: false,
          // 列表数据
          data: [],
          // 请求下标
          limit: [0,20],
          // 滚动条配置
          scroll_option: {
              pullUpLoad:{
                  txt:{
                      more:"上拉加载",
                      noMore:"----我也是有底线的----"
                  }
              }
          },
          watch: {
              is_show: false,
              data: []
          }
      }
    },
    components: {
        Empty,
        Watch
    },
    created() {
        this.red_id = this.$route.params.form_red_id
    },
    mounted() {
        this.getFormList()
    },
    methods: {
        // 获取记录列表
        getFormList() {
            if(this.loading) return
            this.loading = true
            this.$sendGet("form/red-list/" + this.red_id,{
                limit: this.limit
            })
                .then((res) => {
                    this.loading = false
                    let data = res.data.data
                    if(data.length > 0) {
                        this.data.push(...data)
                        this.limit[0] += this.limit[1]
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false)
                    } else {
                            this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                    }
                })
        },
        /**
         * 上拉加载
         */
        upLoad() {
            this.getFormList()
        },
        /**
         * 显示表单内容信息
         */
        showWatch(data) {
            this.watch = {
                is_show: true,
                data
            }
        },
        /**
         * 发送表单数据到指定邮箱
         */
        sendEmail() {
            let Dialog = this.$createDialog({
                type: 'prompt',
                title: '发送表单数据到指定邮箱',
                prompt: {
                    value: '',
                    placeholder: '请输入要接收表单数据的邮箱'
                },
                onConfirm: (e,value) => {
                    if(!/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/.test(value)) {
                        this.$createToast({
                            time: 1000,
                            txt: '请输入正确的邮箱',
                            type: 'error'
                        }).show()
                        Dialog.show()
                        return false
                    }
                    this.sending = true
                    this.$sendPost('mail/red-form/' + this.red_id, {
                        email: value
                    })
                        .then(() => {
                            this.sending = false
                            this.$createToast({
                                time: 1000,
                                txt: '数据发送成功',
                                type: 'correct'
                            }).show()
                        })
                        .catch((error) => {
                            this.$handleError(error,this)
                        })
                }
            }).show()
        }
    }
}
</script>

<style scoped lang="less" src="./form-list.less"></style>
